<template>
    <div>
        <breadcrumb :routerList="routerList"></breadcrumb>
        <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="商品展示图">
                <el-upload
                        action="https://yx.tfnhg.com/oss_upload"
                        list-type="picture-card"
                        :limit="imgLimit"
                        :file-list="ruleForm.bannerImgList"
                        :multiple="true"
                        :on-success="bannerSuccess"
                        :on-preview="bannerPreview"
                        :on-remove="bannerRemove"
                        :on-exceed="bannerExceed"
                        :on-error="bannerError"
                        :disabled="isDisabled">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="bannerVisible">
                    <img width="100%" :src="bannerImageUrl" alt="">
                </el-dialog>
                <span>{{advise}}</span>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="goBack">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import breadcrumb from '@/components/breadcrumb.vue'
    export default {
        components: {breadcrumb},
        data(){
            return {
                routerList: [
                    {
                        name: '商城轮播图',
                        path: '/bannerList'
                    },
                    {
                        name: 'banner',
                        path: ''
                    }
                ],
                ruleForm: {
                    bannerImgList: [],
                },
                bannerImageUrl: '',
                bannerVisible: false,
                imgLimit: 5,
                isDisabled: false,
                mainType: '',
                bannerId: '',
                advise:'注：建议上传750px*330px；最多可上传五张'
            }
        },
        created(){
            this.mainType = this.$route.query.type
            if(this.mainType == 4){
                this.isDisabled = true
            }
            if(this.$route.query.list != ''){
                let list = this.$route.query.list
                this.getData(list)
            }
        },
        methods:{
            getData(list){
                console.log(list)
                this.bannerId = list.id
                if(this.bannerId == 2){
                    this.advise = '注：建议上传750px*460px；最多可上传五张';
                    this.routerList[1].name = '小店轮播图'
                }
                this.ruleForm.bannerImgList = list.banner
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log(this.ruleForm)
                        if(this.ruleForm){
                            if(this.ruleForm.bannerImgList.length == 0){
                                this.$message.err('请选择banner图')
                                return false
                            }
                        }
                        this.operationBanner()
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            async operationBanner(){
                let data = {}
                if(this.mainType == 1){
                    data = {
                        banner: this.ruleForm.bannerImgList
                    }
                }else{
                    data = {
                        id: this.bannerId,
                        banner: this.ruleForm.bannerImgList
                    }
                }
                console.log(data)
                let res = await this.$Http.operationBanner({
                    type: this.mainType,
                    pro: data
                })
                console.log(res)
                if(res.code == 1){
                    this.$message({
                        type: 'success',
                        message: this.mainType==1?'新增banner成功':'修改banner成功!'
                    });
                    this.$router.go(-1);
                }
            },
            bannerSuccess(response, file, fileList){
                console.log(response, file, fileList)
                let disposeFile = this.$util.disposeFile(fileList)
                this.ruleForm.bannerImgList = disposeFile
                this.$message({
                    type: 'success',
                    message: '上传图片成功'
                });
            },
            bannerPreview(file){
                console.log(file)
                this.bannerImageUrl = file.response;
                this.bannerVisible = true;
            },
            bannerRemove(file, fileList){
                let disposeFile = this.$util.disposeFile(fileList)
                this.ruleForm.bannerImgList = disposeFile
            },
            bannerExceed(files, fileList) {//图片上传超过数量限制
                this.$message.error('上传图片数量不能超过5张!');
                console.log(files,fileList)
            },
            bannerError(err, file, fileList){//图片上传失败调用
                console.log(err, file, fileList)
                this.$message.error('上传图片失败!');
            },
            goBack(){
                this.$router.go(-1);
            },
        }
    }
</script>

<style>
    .demo-ruleForm{
        width: 100%;
        background: white;
        margin-top: 20px;
        padding: 20px 0;
        box-sizing: border-box;
    }
    .input{
        width: 50%;
    }
</style>
